//  进行路由的权限匹配
import React, { Component, ReactNode } from 'react';
import { Navigate, Route, Routes, type RouteProps } from 'react-router-dom';
import { webNav } from '../constants';
import Index from '@/pages';
import Web from '@/pages/web';
import NotFound from '@/component/NotFound';
// 不带目录
import Markdown from '@/components/Markdown';
// 带目录，渲染有问题
import NavMarkdown from '@/component/NavMarkdown';
import App from '../pages/app';

import ajax from '@@/note/ajax.md';
import css from '@@/note/css.md';
import html from '@@/note/html.md';
import http from '@@/note/http.md';
import js from '@@/note/js.md';
import md from '@@/note/md.md';
import qt from '@@/note/qt.md';
import react from '@@/note/react.md';
// import webpack from "@@/note/webpack.md";

// test
import Com from '@/pages/com';
import MarkdownTest from '@/pages/com/MarkdownTest';
import MarkdownEdit from '@/pages/com/MarkdownEdit';

// render markdown
function RM(md: string) {
  if (webNav) {
    return <NavMarkdown>{md}</NavMarkdown>;
  }
  return <Markdown>{md}</Markdown>;
}

// 原生react 需要导入组件
const routes = [
  // { index: true, element: <Index /> }
  {
    path: '/',
    element: <Index />,
    /* index 存在不能有children，可以通过path为''处理，将二级路由提升一级, 同时如果多个path相同优先前一个 */
    children: [
      { path: '', element: <Navigate to="web" /> },
      {
        // md
        path: 'web',
        element: <Web />,
        children: [
          { path: '', element: <Navigate to="js" /> },
          { element: RM(js), path: 'js', name: 'esnext' },
          { element: RM(ajax), path: 'ajax', name: 'ajax' },
          { element: RM(css), path: 'css', name: 'css' },
          { element: RM(html), path: 'html', name: 'html' },
          { element: RM(http), path: 'http', name: 'http' },
          { element: RM(md), path: 'md', name: 'md 解析' },
          { element: RM(react), path: 'react', name: 'react' },
          // { element: RM(webpack), path: "webpack", name: "webpack" },
          { element: RM(qt), path: 'qt', name: 'question' },

          // page content
          { element: <App />, path: 'hh', name: 'hh' }
        ]
      },
      {
        // test
        path: 'com',
        element: <Com />,
        children: [
          { path: '', element: <Navigate to="mkt" /> },
          { path: 'mkt', element: <MarkdownTest />, name: 'markdown 基本演示' },
          { path: 'mkedit', element: <MarkdownEdit />, name: 'markdown 编辑器' },
        ]
      }
    ]
  },
  // { path: ':id', element: <Invoice data={1} /> },
  { path: '*', element: <Navigate to="/" replace /> } // 通过*通配符实现404页面
  // { path: "*", element: <NotFound /> },
];

export default routes;
